import React from "react";
import {Text, TextInput, TouchableOpacity} from "react-native";
import chjStyle from "../../../CustomStyle";

export default class InputTextItem extends React.Component {
    constructor(props) {
        super(props);

        let valid = true;
        const valueStr = this.props.object.value.name || this.props.object.value;
        if (this.props.minLength && this.props.minLength > valueStr.length) {
            valid = false;
        }

        this.state = {
            isValid: valid
        };
    }

    // 渲染时调用
    // 三个按钮
    render() {
        return (
            <TouchableOpacity
                onPress={() => {
                    if (this.props.onClickedListener) this.props.onClickedListener();
                }}
                style={[chjStyle.textItem]}>
                <Text style={{
                    position: 'absolute',
                    color: '#303030',
                    textAlign: 'left',
                    backgroundColor: 'rgba(0, 0, 0, 0)',
                    fontSize: chjStyle.getActualFontSize(30),
                    top: chjStyle.getActualSizeInVertical(40),
                    left: chjStyle.getActualSizeInHorizontal(40),
                    width: chjStyle.getActualSizeInHorizontal(375),
                }}>{this.props.object.name}</Text>
                <TextInput
                    ref="ti"
                    placeholder="未填写"
                    defaultValue={this.props.object.value.name || this.props.object.value}
                    autoCapitalize={this.props.autoCapitalize}
                    keyboardType={this.props.keyboardType}
                    maxLength={this.props.maxLength}
                    onChangeText={this.onChangeText.bind(this)}
                    underlineColorAndroid={'#00000000'}
                    style={{
                        position: 'absolute',
                        color: this.state.isValid ? '#333' : '#e11',
                        textAlign: 'right',
                        backgroundColor: 'rgba(0, 0, 0, 0)',
                        fontSize: chjStyle.getActualFontSize(30),
                        right: chjStyle.getActualSizeInHorizontal(30),
                        width: chjStyle.getActualSizeInHorizontal(500),
                        height: chjStyle.getActualSizeInVertical(128),
                    }}/>
            </TouchableOpacity>
        );
    }

    onChangeText(value) {
        if (this.props.keyboardType === 'numeric') {
            var matchArray = value.match(/^[0-9]+\.[0-9]+$|^[0-9]+$/);
            this.setState({
                isValid: matchArray && matchArray.length > 0
            });
        }
        else if (this.props.autoCapitalize === 'characters') {
            value = value.toUpperCase();
            this.refs.ti.value = value;

            if (this.props.minLength) {
                if (value.length < this.props.minLength) {
                    this.setState({
                        isValid: false
                    });
                } else {
                    this.setState({
                        isValid: true
                    });
                }
            } else {
                this.setState({});
            }
        }
        else if (this.props.minLength) {
            if (value.length < this.props.minLength) {
                this.setState({
                    isValid: false
                });
            } else {
                this.setState({
                    isValid: true
                });
            }
        }

        this.props.object.value = value;
        if (this.props.onTextChangedListener)
            this.props.onTextChangedListener(value);
    }
}
